<template>
	<div class="cmt-container">
		<h3>发表评论</h3>
		<hr>
		<textarea v-model="msg" maxlength="120" placeholder="请输入要评论的内容(最多120字)"
		></textarea>
		
		<mt-button @click="postComment" type="primary" size="large">发表评论</mt-button>
		
		<div class="cmt-list">
			<div class="cmt-item" v-for="(item, i) in comments" :key="item.add_time">
				<div class="cmt-title">
					第{{ i+1 }}楼&nbsp;&nbsp;用户: {{ item.user_name }}&nbsp;&nbsp;发表时间: {{ item.add_time | dateFormat }}
				</div>
				<div class="cmt-body">
					{{ item.content === 'undefined' ?  'this is the undefined' : item.content }}
				</div>
			</div>
			
			<div class="cmt-item">
				<div class="cmt-title">
					第{{ length + 1 }}楼&nbsp;&nbsp;用户: 匿名用户&nbsp;&nbsp;发表时间: 2019-10-31 10:59:48
				</div>
				<div class="cmt-body">
					锄禾日当午 复方
				</div>
			</div>
			
			<div class="cmt-item">
				<div class="cmt-title">
					第{{ length + 2 }}楼&nbsp;&nbsp;用户: 匿名用户&nbsp;&nbsp;发表时间: 2019-10-31 10:59:48
				</div>
				<div class="cmt-body">
					锄禾日当午 复方
				</div>
			</div>
		</div>
		
		<mt-button type="danger" size="large" plain @click="getMore">加载更多</mt-button>
		
	</div>
</template>

<script>
	import { Toast } from 'mint-ui'
	export default{
		data(){
			return {
				pageindex: 1,   // 默认展示第一页数据
				comments: [],  // 所有的评论数据
				length: 0,
				msg: ''     // 评论输入的内容
			}
		},
		created(){
			this.getComments()
			this.getLength()
		},
		methods:{
			getComments() {   // 获取评论...
				this.$http.get('api/getcomments/' + this.id + '?pageindex=' + this.pageindex)
					.then(result => {
						if(result.body.status === 0) {
							// this.comments = result.body.message
							// 每当获取新评论数据的时候，不要把原来的数据覆盖，而是原来的数据拼接新数据
							this.comments = this.comments.concat(result.body.message)
							console.log(this.comments.length)
							this.length = this.comments.length
						} else {
							Toast('加载评论失败！')
						}
					})
			},
			getLength() {
				// 因为是异步操作，所以先打印这个
				console.log(this.comments.length)
			},
			getMore() {   // 加载更多评论...
				this.pageindex++
				this.getComments()
			},
			postComment() {
				// 校验是否为空内容
				if(this.msg.trim().length === 0) {
					return Toast('评论内容不能为空！')
				}
				// 参数1：请求的URL地址
				// 参数2：提交给服务器的数据对象 { content: this.msg }
				// 参数3：定义提交时候，表单数据的格式 { emulateJSON: true }
				// 
				this.$http.post('api/postcomment/' + this.$route.params.id, {
					content: this.msg.trim()
				}).then(function(result){
					if(result.body.status === 0) {
						// 1.拼接出一个评论对象
						var cmt = { user_name: 'hardy', add_time: Date.now(),
						content: this.msg.trim()}
					}
					this.comments.unshift(cmt)
					this.msg = ''
				})
			}
		},
		props: ["id"]
	}
</script>

<style lang="scss" scoped>
	.cmt-container{
		h3{ font-size: 18px;}
	}
	textarea{ font-size: 14px; height: 85px; margin: 0;}
	.cmt-list{
		margin: 5px 0;
		.cmt-item{
			font-size: 13px;
			.cmt-title{
				background-color: #ccc;
				line-height: 30px;
			}
			.cmt-body{
				line-height: 40px;
				text-indent: 2em;
			}
		}
	}
</style>
